import React from 'react';
// 引入组件
import NavHeader from "../../components/NavHeader";
import HousePackage from "./components/HousePackage";

// 导入ui组件
import { Carousel, Flex, Grid } from 'antd-mobile';

// 导入样式
import styles from './index.module.css'

// 导入请求api
import { getHouseInfoApi } from "../../api/axios";

// 带入环境变量的基地址
import { BASE_URL } from '../../utils/url'

export default class HouseDetail extends React.Component {
    // 状态值书写区域
    state = {
        HouseInfo: {},
        isSwiperLoaded: false
    }
    //  事件处理区域
    // 获取房源详情
    async getHouseInfo() {
        // 获取漏油传参
        const { id } = this.props.match.params
        const { data: { body } } = await getHouseInfoApi(id)
        console.log(body);
        this.setState({
            HouseInfo: body,
            isSwiperLoaded: true
        })
    }
    componentDidMount() {
        // 执行===获取房源详情
        this.getHouseInfo()
    }

    // 渲染轮播图
    renderSwiper = () => {
        const { houseImg } = this.state.HouseInfo
        return (houseImg.map(val => (
            <a
                key={val}
                href="/"
                style={{ display: 'inline-block', width: '100%', height: 212 }}
            >
                <img
                    src={BASE_URL + val}
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                />
            </a>
        )))
    }


    // 视图渲染区域
    render() {

        const { } = this.state.HouseInfo
        return (
            <>
                {/* 顶部导航 */}
                <NavHeader
                    className={styles.navHeader}
                    rightContent={[<i key="share" className="iconfont icon-share" />]}
                >房屋详情</NavHeader>
                {/* 轮播图 */}
                <div className="swiper">
                    {this.state.isSwiperLoaded ? (<Carousel
                        infinite
                        autoplay
                        autoplayInterval={2000}
                    >
                        {this.renderSwiper()}
                    </Carousel>) : ''}
                </div>
                {/* 房屋基础信息 */}
                <div className={styles.info}>
                    <h3 className={styles.infoTitle}>
                        整租 · 精装修，拎包入住，配套齐Q，价格优惠
          </h3>
                    <Flex className={styles.tags}>
                        <Flex.Item>
                            <span className={[styles.tag, styles.tag1].join(' ')}>
                                随时看房
              </span>
                        </Flex.Item>
                    </Flex>

                    <Flex className={styles.infoPrice}>
                        <Flex.Item className={styles.infoPriceItem}>
                            <div>
                                8500
                <span className={styles.month}>/月</span>
                            </div>
                            <div>租金</div>
                        </Flex.Item>
                        <Flex.Item className={styles.infoPriceItem}>
                            <div>1室1厅1卫</div>
                            <div>房型</div>
                        </Flex.Item>
                        <Flex.Item className={styles.infoPriceItem}>
                            <div>78平米</div>
                            <div>面积</div>
                        </Flex.Item>
                    </Flex>

                    <Flex className={styles.infoBasic} align="start">
                        <Flex.Item>
                            <div>
                                <span className={styles.title}>装修：</span>
                精装
              </div>
                            <div>
                                <span className={styles.title}>楼层：</span>
                低楼层
              </div>
                        </Flex.Item>
                        <Flex.Item>
                            <div>
                                <span className={styles.title}>朝向：</span>南
              </div>
                            <div>
                                <span className={styles.title}>类型：</span>普通住宅
              </div>
                        </Flex.Item>
                    </Flex>
                </div>

                {/* 地图位置 */}
                <div className={styles.map}>
                    <div className={styles.mapTitle}>
                        小区：
            <span>天山星城</span>
                    </div>
                    <div className={styles.mapContainer} id="map">
                        地图
          </div>
                </div>

                {/* 房屋配套 */}
                <div className={styles.about}>
                    <div className={styles.houseTitle}>房屋配套</div>
                    <HousePackage
                        list={[
                            '电视',
                            '冰箱',
                            '洗衣机',
                            '空调',
                            '热水器',
                            '沙发',
                            '衣柜',
                            '天然气'
                        ]}
                    />
                    {/* <div className="title-empty">暂无数据</div> */}
                </div>
           
           
            </>
        )
    }
}
